import React, { useState, useEffect } from 'react'
import { backgroundObj, navigateTo, goBack } from '@/utils/utils'
import { View, Swiper, SwiperItem, Button, Input, Text } from '@tarojs/components';
import { fetchUserHelpQa, fakeCollectOrUnCollectHelpQa, fetchListCollectUserHelpQa } from '@/server/shop'
import Tabbar from '@/components/Tabbar'
import Tabs from '@/components/Tabs'
import { getCurrentInstance, useReachBottom, usePullDownRefresh } from '@tarojs/taro'
import Image from '@/components/FormCondition/Image'
import FixedBtn from "@/components/FormCondition/FixedBtn";
import Taro from '@tarojs/taro';
import Router from '@/utils/router'
import Empty from '@/components/Empty'
import './index.scss'
let MutualTimeout = null
const MutualList = (props) => {
    const [list, setList] = useState([])
    const [page, setPage] = useState({
        page: 1,
        limit: 20,

    })
    const [active, setActive] = useState('0')
    const list1 = [{
        label: '互助答疑',
        value: '0',

    },
    ]
    const fetchData = () => {
        fetchListCollectUserHelpQa({ ...page, }).then(val => {
            const { postList } = val
            setList([...list, ...postList])
        }).finally(() => {
            Taro.stopPullDownRefresh();
        });
    }

    useEffect(() => {
        fetchData()
    }, [page])
    usePullDownRefresh(() => {
        setPage(() => {
            setList([])
            return {
                ...page,
                page: 1,

            }
        })
    })
    useReachBottom(() => {
        setPage({
            ...page,
            page: page.page + 1
        })
    })
    const content = {
        0: <Empty list={list}>
            {list.map((val = {}) => {
                if (!val) {
                    return null
                }
                const { content = '', collectFlag, viewAmount, answerAmount, createTime, username, collectAmount, userProfile } = val
                const { images = '', text } = content.length > 0 ? JSON.parse(content) : {}
                const imageList = images.split(',').filter(val => {
                    return val
                })
                return <View onClick={() => {
                    Router('MutualDetail', { args: { id: val.id } })
                }} className='MyMutuaList_user_box'>
                    <View className='MyMutuaList_user_info'>
                        <View className='MyMutuaList_user'>
                            <View className='MyMutuaList_user_left'>
                                <View style={backgroundObj(userProfile)} className='MyMutuaList_user_profile'></View>
                                <View className='MyMutuaList_user_name font_hide'>
                                    {username}
                                </View>
                            </View>
                            {/* <View className='MyMutuaList_user_right'>
                        {createTime}
                    </View> */}
                        </View>
                        <View className='MyMutuaList_title_box'>
                            {text}
                        </View>
                        <View className="Collect_list_showImage">
                            {imageList.map(val => {
                                return <View className="Collect_list_image">
                                    <Image src={val}></Image>
                                </View>
                            })}
                        </View>
                        <View className='MyMutuaList_card_bottom'>
                            <View className='MyMutuaList_card_bottomLeft'>
                                {createTime}
                            </View>
                            <View className='MyMutuaList_card_bottomRight'>
                                <View className='MyMutuaList_card_iconBox'>
                                    <View className='MyMutuaList_card_icon MyMutuaList_card_iconStyle3'></View>
                                    <View className=''>
                                        {val.answerAmount}
                                    </View>
                                </View>
                                <View className='MyMutuaList_card_iconBox'>
                                    <View className={collectFlag === '1' ? 'MyMutuaList_card_icon MyMutuaList_card_iconStyle5' : 'MyMutuaList_card_icon MyMutuaList_card_iconStyle4'}></View>
                                    <View className=''>
                                        {collectAmount}
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
            })}
        </Empty>,
        1: <Empty list={[]}>

        </Empty>
    }[active]
    return <View className='MyMutuaList_box'>
        <Tabs classname='QaRecord_top' onChange={(e) => {
            setActive(e)
        }} active={active} list={list1}></Tabs>
        <View className='MyMutuaList_content_box'>
            {content}
        </View>
    </View>

}
export default MutualList